<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>E.Life</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="icon/iconfont.css"/>
    <link rel="stylesheet" href="css/com-footer.css"/>
    <style>
        .container{}
        .title-search{padding: 0.75rem 0.5rem;position: relative;}
        .title-search input{background-color: #35353a;color: #999;font-size: 0.7rem;height: 1.75rem;line-height: 1.75rem;border-radius: 0.2rem;text-indent: 0.8rem;}
        .title-search i{color: #fbb701;display: inline-block;font-size: 1.1rem;width: 2.5rem;height: 1.75rem;line-height: 1.7rem;text-align: center;
            position: absolute;right: 10px;top: 15px;}

        .content{}
        .content-title{color: #a0a0a0;margin-left: 0.5rem;}
        .content-list{margin-top: 0.5rem;}
        .content-list li{position: relative;}
        .content-list li img{display: block;width: 100%;}
        .content-list li .mask{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);z-index: 1;}
        .content-list li .words{position: absolute;width: 100%;left: 0;bottom: 0.5rem;padding: 0 0.5rem;z-index: 2;}
        .content-list li .words h3{font-size: 1rem;color: #fff;margin-bottom: 0.5rem;font-weight: 600;}
        .content-list li .words .address{float: left;color: #a0a0a0;font-size: 0.65rem;}
        .content-list li .words .far{float: right;color: #a0a0a0;font-size: 0.65rem;}
    </style>
</head>
<body>
    <div class="container">
        <div class="title-search">
            <input type="text" placeholder="请输入关键字" onchange="my_test()"/>
            <div class="search-btn">
                <i class="iconfont icon-search"></i>
            </div>
        </div>
        <div class="content">
            <p class="content-title">距离场馆</p>
            <ul class="content-list">
                <li>
                    <a href="nearby_detail.html">
                        <img src="img/index_img01.png" alt=""/>
                        <div class="mask"></div>
                        <div class="words">
                            <h3>和贵work+私教馆</h3>
                            <p class="clear">
                                <span class="address">成都市武侯区天府新谷10号楼1304</span>
                                <span class="far">3.49公里</span>
                            </p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="nearby_detail.html">
                        <img src="img/index_img01.png" alt=""/>
                        <div class="mask"></div>
                        <div class="words">
                            <h3>和贵work+私教馆</h3>
                            <p class="clear">
                                <span class="address">成都市武侯区天府新谷10号楼1304</span>
                                <span class="far">3.49公里</span>
                            </p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="nearby_detail.html">
                        <img src="img/index_img01.png" alt=""/>
                        <div class="mask"></div>
                        <div class="words">
                            <h3>和贵work+私教馆</h3>
                            <p class="clear">
                                <span class="address">成都市武侯区天府新谷10号楼1304</span>
                                <span class="far">3.49公里</span>
                            </p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="nearby_detail.html">
                        <img src="img/index_img01.png" alt=""/>
                        <div class="mask"></div>
                        <div class="words">
                            <h3>和贵work+私教馆</h3>
                            <p class="clear">
                                <span class="address">成都市武侯区天府新谷10号楼1304</span>
                                <span class="far">3.49公里</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
<footer class="common-footer-box">
    <div class="common-footer clear">
        <a class="on" href="#">
            <i class="iconfont icon-changguan"></i>
            <span>附近场馆</span>
        </a>
        <a href="team_class.html">
            <i class="iconfont icon-mukeappicon03"></i>
            <span>小团体课</span>
        </a>
        <a href="personal_guide.html">
            <i class="iconfont icon-jianshenjiaolian"></i>
            <span>私人指导</span>
        </a>
        <a href="all_lesson.html">
            <i class="iconfont icon-iconfontuser"></i>
            <span>我的课程</span>
        </a>
    </div>
</footer>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $('.title-search input').keyup(function(){
        var value = $(this).val();
        console.log(value);
        $.ajax({
            type: 'post',  //请求方式
            url: '',  //请求地址
            dataType: 'json',  //请求数据类型
            data: {
                value: value//这里就是你查询的内容
            },
            success:function(data){
                if(data.length<1){
                    $('.search-out').fadeOut(0);
                    return
                }
                var my_html = '';
                $('.search-out').fadeIn(0).html('');
                for(var i = 0;i<data.length;i++){
                    my_html += '<div class="search-out-item" onclick="function(){}">'+data.xxx+'</div>';
                }
                $('.search-out').html(my_html);
            },
            error:function(){
                //执行失败的回掉
            }
        })
    })
</script>
</html>